<template>
	<div>
		
		<el-menu
		  :default-active="activeIndex2"
		  class="el-menu-demo"
		  mode="horizontal"
		  @select="handleSelect"
		  background-color="#ffffff"
		  
		  active-text-color="#3762ff" style="margin-top: 10px;">
		  <el-menu-item index="/admin/orderlist">当日订单<span>()</span></el-menu-item>
		  <el-menu-item index="2">待付款<span>({{orderList.length}})</span></el-menu-item>
		  <el-menu-item index="3">待发货<span>()</span></el-menu-item>
		  <el-menu-item index="4">待收货<span>()</span></el-menu-item>
		  <el-menu-item index="5">已完成<span>()</span></el-menu-item>
		  <el-menu-item index="6">待退款<span>()</span></el-menu-item>
		  <el-menu-item index="7">已退款<span>()</span></el-menu-item>
		  
		</el-menu>
		
		
		<el-form :inline="true"  :model="search" class="demo-form-inline">
		  <el-form-item label="配送方式">
		    <template>
		      <el-radio-group v-model="radio">
		        <el-radio :label="3">全选</el-radio>
		        <el-radio :label="6">自提</el-radio>
		        <el-radio :label="9">配送</el-radio>
		      </el-radio-group>
		    </template>
		  </el-form-item>
		  <br>
		  <el-form-item label="订单编号">
		    <el-input v-model="search.OrderNum" placeholder="订单编号"></el-input>
		  </el-form-item>
		  <el-form-item label="商品编号">
		    <el-input v-model="search.Goodid" placeholder="商品编号"></el-input>
		  </el-form-item>
		  <el-form-item label="所属门店">
		    <el-input v-model="search.ShippingAddress" placeholder="所属门店"></el-input>
		  </el-form-item><br>
		  <el-form-item label="会员账号">
		    <el-input v-model="search.CustomerId" placeholder="会员账号"></el-input>
		  </el-form-item>
		  <el-form-item label="收货人" style="padding-left: 14px;">
		    <el-input v-model="search.user" placeholder="收货人"></el-input>
		  </el-form-item>
		  <el-form-item label="下单时间">
			   <div class="block">
			      
			      <el-date-picker
			        v-model="value1"
			        type="datetime"
					style="width:202px"
			        placeholder="选择日期时间">
			      </el-date-picker>
			    </div>
		    <!-- <el-input v-model="search.CreateAt" placeholder="下单时间" class=""></el-input> -->
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" style="margin-left: 20px;width: 100px;">
		  		<i class="el-icon-search"></i>
		  		<span>查询</span>
		  	</el-button>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="resetForm()" style="width: 100px;">
		  		<span>重置</span>
		  	</el-button>
		  </el-form-item>
		  
		</el-form>
		<el-button  type="primary">
			<i class="el-icon-document-checked"></i>
			<span>导出选中订单</span>
		</el-button>
		<el-table
		    ref="multipleTable"
		    :data="ftableData"
		    tooltip-effect="dark"
		    style="width: 100%"
		    @selection-change="handleSelectionChange">
		    <el-table-column
		      type="selection"
		      width="55">
		    </el-table-column>
		    <el-table-column
		      label="订单编号"
			  prop="OrderNum"
		      width="160">		      
		    </el-table-column>
		    <el-table-column
		      prop="CreateAt"
		      label="下单时间"
		      width="160">
		    </el-table-column>
		    <el-table-column
		      prop="CustomerId"
		      label="会员账号"
		      show-overflow-tooltip>
		    </el-table-column>
			<el-table-column
			  prop="TotalAmount"
			  label="订单总额"
			  width="160">
			</el-table-column>
			<el-table-column
			  prop="ShippingAddress"
			  label="所属门店"
			  width="160">
			</el-table-column>
			 <el-table-column  label="订单状态">
				  <template slot-scope="scope">
				  
				  <span v-if="scope.row.OrderStatus=='Returned'"> 已拒绝</span>
				  <span v-else-if="scope.row.OrderStatus=='wan'" style="color:lawngreen"> 已处理</span>
				  <span v-else style="color: red;">待付款</span>
				  </template>
			 </el-table-column>
			 <el-table-column  label="操作">
			 	 <template slot-scope="scope">
					 <i class="el-icon-search" style="color: #1E90FF;"></i>
					<span style="color: #1E90FF;">查看订单</span>	
			 	 </template>
			 </el-table-column>
		  </el-table>
		     <el-pagination
				
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page="pagination.currentPage"
		        :page-sizes="pagesizes"
		        :page-size="pagination.pageSize"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="pagination.total">
		      </el-pagination>
		  
	</div>
</template>

<script>
	// import {Mock} from '../../api/user/index.js'
	export default {
		data(){
			return {
				activeIndex2: '1',
				radio: 3,
				value1:'',
				orderList:[],
				pagination:{},
				search: {
				  OrderNum: '',
				  ShippingAddress:'',
				  CustomerId:'',
				  region: '',
				  Goodid:'',
				  user:'',
				  CreateAt:''
				}
			}
		},
		created(){
			this.getList();
		},
		computed:{
			ftableData:function(){
				var temp = this.orderList.filter(row =>{
					
						var flag = true;
						for(let k in this.search){
							if(this.search[k]!=""&&!String(row[k]).includes(this.search[k])){
								flag=false;
							}
						}	
					
					return flag;
				})
				return temp;
			},
			pagesizes:function(){
				var pages = Math.ceil(this.pagination.total/this.pagination.pageSize);
				 
				var temp = [];
				for(var i=1;i<=pages;i++){
					temp.push(i*this.pagination.pageSize);
				}
				console.log(temp,"temp")
				return temp;
			}
		},
		methods:{
			resetForm() {
				this.search =
				{
					OrderNum: '',
					ShippingAddress:'',
					CustomerId:'',
					region: '',
					Goodid:'',
					user:'',
					CreateAt:''
				}
			},
			getList(){
				// 根据参数不一样去回来的数据不一样
				this.$http.get("/web/orders/?page=1&OrderStatus=all&")
				.then(res=>{
					console.log(res.data)
					this.orderList = res.data.list;
					this.pagination = res.data.pagination;
				})
				.catch(err=>{console.log(err)})
			},
			 handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			  },
				  
			 handleSizeChange(val) {
			     console.log(`每页 ${val} 条`);
			 },
			 handleCurrentChange(val) {
			    console.log(`当前页: ${val}`);
			 },
			 handleSelectionChange(){},
		}
	}
</script>

<style>
	h1{
		color: #545454;
		width: 80px;
		
		background-color:#ccc;
		
	}
</style>
